<template>
  <div class="v1">
    <div class="v1-content">
      <div class="v1a">
        <div class="v1a-header">
          <h3>前台收银登录</h3>
        </div>
        <div class="v1a-form">
          <lay-form :model="model" label-position="left">
            <lay-form-item label="机构" prop="branch">
              <lay-input v-model="model.branch"></lay-input>
            </lay-form-item>
            <lay-form-item label="账户" prop="uid">
              <lay-input v-model="model.uid" keyboard="true"></lay-input>
            </lay-form-item>
            <lay-form-item label="密码" prop="pw">
              <lay-input
                v-model="model.pw"
                type="password"
                keyboard="true"
              ></lay-input>
            </lay-form-item>
            <lay-form-item style="text-align: center">
              <lay-button type="primary" @click="submit" :loading="loading"
                >登录</lay-button
              >
            </lay-form-item>
          </lay-form>
        </div>
      </div>
    </div>
    <keyboard
      :transitionTime="'0.5s'"
      :maxQuantify="10"
      :showKeyboard="showKeyboard"
      @clickKey="clickKey"
      float
      @clickNumber="clickNumber"
      :blurHide="true"
    ></keyboard>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { layer } from "@layui/layui-vue";
import keyboard from "@/components/keyboard/keyboardIndex.vue";
import { useUserStore } from "@/store";
import { useRouter } from "vue-router";
import { useLoading } from "@/hooks";

const router = useRouter();
const userStore = useUserStore();

const { loading, setLoading } = useLoading();

const model = ref({
  branch: "1001", //机构编号
  uid: "admin", //账户
  pw: "123456", //密码
  loginty: "pos", //登录类型-前台固定值"pos"
  terminal: "tt", //终端号loginty=pos时必填
});

const showKeyboard = ref(false);

//点击键盘的值
const clickKey = (key) => {
  // console.log("key-->>",key);
};
//点击键盘时数字的值
const clickNumber = (key) => {
  // console.log("key-->>",key);
};

const submit = async () => {
  try {
    console.log(JSON.stringify(model.value));
    const params = { ...model.value };
    setLoading(true);
    await userStore.login(params);
    router.push("/");
    setLoading(false);
    layer.msg("登录成功", { time: 1000, icon: 1 });
  } catch (error) {
    layer.msg("登录失败", { time: 1000, icon: 2 });
  } finally {
    setLoading(false);
  }
};

onMounted(() => {});
</script>

<style lang="less" scoped>
.v1 {
  display: flex;
  background-color: rgb(171 132 209 / 90%);
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  .v1-content {
    height: 400px;
    width: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .v1a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border: 1px solid #fff;
      border-radius: 10px;
      width: 100%;
      height: 100%;
      .v1a-header {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
      .v1a-form {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .layui-form {
          width: 80%;
        }
      }
    }
  }
}
</style>
